<template>
    <div class="settlement">
        <div class="head">
            <div class="head-txt">
                <span>填写订单信息</span>
                <router-link to="/">|&nbsp;回到首页</router-link>
            </div>
            <div class="order-icon">
            </div>
        </div>
       <div class="settlement-item">
            <div class="title">
                <p>收货</p>
                <p>地址</p>
            </div>
               <div class="address-list">
                   <div v-show="!addAddress" v-for="(item, index) in $store.state.lognUser.address" :key="index"
                        class="address-item" :class="{hasChoose: choose == index}"
                   @click="chooseAddress(item, index)">
                       <p>{{item.name}}</p>
                       <p>{{item.tel}}</p>
                       <p>{{item.city}}</p>
                       <p>{{item.detailed}}</p>
                   </div>
                   <div v-show="!addAddress" class="address-item">
                       <img src="~/assets/img/common/addr-add.jpg" alt="添加地址" @click="addAddr">
                   </div>
                   <div v-show="addAddress" class="new-addressee">
                       <div><span>收货人姓名:</span>
                           <el-input
                                   style="width: 200px"
                                   placeholder="请输入内容"
                                   v-model="addressMessage.name">
                           </el-input>
                       </div>
                       <div><span>联系电话:</span><el-input
                               style="width: 200px"
                               placeholder="请输入内容"
                               v-model="addressMessage.tel">
                       </el-input></div>
                       <div>
                           <span>联系地址:</span>
                           <el-cascader
                                   size="large"
                                   :options="options"
                                   v-model="selectedOptions"
                                   @change="handleChange"
                           >
                           </el-cascader>

                       </div>
                       <div>
                           <span>详情地址:</span>
                           <el-input
                                   style="width: 400px"
                                   placeholder="请输入内容"
                                   v-model="addressMessage.detailed"
                           >
                           </el-input>
                       </div>

                       <div><button class="btn" @click="submitAdress">保存收货地址</button><button class="btn" @click="cancel">取消</button></div>

                   </div>
               </div>
       </div>
        <div class="settlement-item">
            <div class="title">
                <p>商品</p>
                <p>清单</p>
            </div>
            <div class="goods-list">
                <div class="goods-item">
                   <span>商品名称</span><span>单价</span><span>数量</span><span>小计</span>
                </div>
                <div class="goods-item" v-for="(item, index) in $store.getters.getChooseCart" :key="index">

                    <div>
                        <img :src="item.showUrl" alt="" @click="goToDetail(item.id)">
                        <div>
                            <p @click="goToDetail(item.id)"><a href="javascript:void(0)">{{item.name}}</a></p>
                            <p>参数：{{item.params}}</p>
                        </div>
                    </div>
                    <div>￥{{item.price}}</div>
                    <div>{{item.num}}</div>
                    <div>{{item.price * item.num}}</div>
                </div>
            </div>
        </div>
        <div class="settlement-item pay">
            <div class="title">
                <p>订单</p>
                <p>结算</p>
            </div>
            <div class="pay-message">
                <el-select v-model="value" size="small" placeholder="请选择使用的优惠券">
                    <el-option
                            v-for="item in option"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div>
                   <p> 您当前拥有积分{{$store.state.lognUser.integral}}</p>
                    <el-input v-model="input" size="small" placeholder="请输入要使用的积分" @input="inputIntegral()"></el-input>
                    <p>每100积分抵扣1元钱</p>
                </div>
                <div>
                    <p>您需要为订单支付<span class="money">￥{{($store.getters.money * discount) - (input / 100)}}</span>元</p>
                    <p v-show="payMessage.address.name">{{payMessage.address.name + ' ' + payMessage.address.city + ' ' + payMessage.address.detailed + ' ' + payMessage.address.tel}}</p>
                    <el-button @click="payOrder">结算</el-button>
                </div>
            </div>
        </div>
        <div class="settlement-item">
            <img src="~/assets/img/common/footer-service.png" alt="">
        </div>
    </div>
</template>

<script>
    import { regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
    import {sendwithget, sendwithpost} from "../../network/profile";

    export default {
        name: "Settlement",
        data() {
            return {
                addAddress: false,
                addressMessage: {},
                options: regionDataPlus,
                selectedOptions: [""],
                payMessage: {
                    address: {}
                },
                choose: null,
                value: '不使用优惠券',
                input: 0,
                discount: 1,
                option: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
            }
        },
        computed: {
            payGoods() {
                return this.$store.getters.getChooseCart
            }
        },
        methods: {
            addAddr() {
                this.addAddress = true
            },
            handleChange (arr) {
                // if (this.addAddress) {
                //     this.addressMessage.city_code = arr;
                //     this.addressMessage.city = CodeToText[arr[0]] + CodeToText[arr[1]] +  CodeToText[arr[2]]
                //     console.log(arr);
                // } else {
                //     this.addressMessage.city_code = arr;
                //     this.addressMessage.city = CodeToText[arr[0]] + CodeToText[arr[1]] +  CodeToText[arr[2]]
                // }
                    this.addressMessage.city_code = arr;
                    this.addressMessage.city = CodeToText[arr[0]] + CodeToText[arr[1]] +  CodeToText[arr[2]]
            },
            submitAdress() {
                console.log(this.addressMessage)
                sendwithget({
                    url: '/receivingaddress',
                    data: this.addressMessage
                }).then(res=>{
                    if (res.data.res_code != 2) {
                        alert(res.data.message)
                    }else {
                        this.$store.commit('addAddress', this.addressMessage);
                        this.addressMessage = {};
                        this.addAddress = false
                    }
                })

            },
            cancel() {
                this.addAddress = false
                this.addressMessage = {}
                this.selectedOptions = [""]
            },
            goToDetail(id) {
                this.$router.push({
                    path: '/detail',
                    query: {
                        goodsId:id
                    }
                })
            },
            chooseAddress(item, index) {
                this.choose = index
                this.payMessage.address =  item
            },
            payOrder() {
                   if (this.payMessage.address.name) {
                       sendwithpost({
                           url: '/pay',
                           data: {
                               cartGoods: this.payGoods,
                               address: this.payMessage.address,
                               discount: this.discount,
                               integral: this.input
                           }
                       }).then(res=> {
                           window.location.href = res.data.url
                       })
                   }else {
                       this.$message({
                           showClose: true,
                           message: '请选择地址',
                           type: 'warning'
                       })
                       return
                   }
            },
            inputIntegral() {
                if (this.input < 0) {
                    this.input = 0
                }else if(this.input > this.$store.state.lognUser.integral) {
                    this.input = this.$store.state.lognUser.integral
                }
            },
            callback() {
                this.discount = this.value
            }
        }
    }
</script>

<style scoped>
    .settlement {
        margin: 200px auto;
        width: 980px;
        height: 100vh;
        font-family: "宋体";

    }
    .head {
        display: flex;
        justify-content: space-between;
        padding-bottom: 1.5em;
        border-bottom: 2px solid #000000;
    }
    .head-txt span{
           font-size: 30px;
           font-weight: 700;
       }
    .head-txt a {
        font-size: 14px;
        color: #333333;
    }
    .settlement .order-icon {
        width: 395px;
        height: 32px;
        background-image: url("../../assets/img/common/order-step.png");
        background-position: center center;
    }
    .settlement-item {
        border: 1px solid #c8c8c8;
        display: flex;
        margin-top: 1.5em;
    }
    .title {
        width: 70px;
        text-align: center;
        padding: 0.75em;
        font-weight: 700;
        background-image: url('../../assets/img/common/detail-bgc.png');
    }
    .address-list {
        display: flex;
        flex-flow: row wrap;
    }
    .address-item {
        width: 260px;
        font-size: 12px;
        border: 1px solid #cccccc;
        margin: 1em;
        padding: 0.5em;
        cursor: pointer;
    }
    .address-item img {
        width: 100%;
    }
    .new-addressee {
        margin: 20px 30px;
    }
    .new-addressee div{
        display: flex;
        margin: 5px;

    }
    .new-addressee div span {
        width: 100px;
        line-height: 40px;
        text-align: right;
        font-size: 13px;
        font-weight: bold;
    }
    .btn {
        border: none;
        background-color: #000000;
        color: #ffffff;
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 15px;
        margin: 30px 130px;
    }
    .btn:hover, .cz:hover {
        background-color: var(--main-color);
    }
    .settlement-item .goods-list{
        margin: 1em;
        background-color: #F8F8F8;
        padding: 8px;
    }
    .goods-list .goods-item:nth-child(1) {
        font-size: 12px;
        color: #333333;
        text-indent: 2em;
    }
    .goods-item {
        display: flex;
        justify-content: space-around;
        text-align: center;
        align-items: center;
        font-size: 0.8em;
        border-bottom: 1px dashed #9D9D9D;
        padding:1em 0;
    }
   .goods-item > * {
       width: 102px;
   }
    .goods-list .goods-item > *:nth-child(1) {
        width: 530px;
        display: flex;
    }
    .goods-list img {
        width: 82px;
        height: 82px;
        margin-right: 1em;
    }
    .goods-item a {
        color: #000000;
        text-decoration: none;
    }
    .goods-item a:hover {
        color: var(--main-color);
        text-decoration: underline;
    }
    .pay {
        justify-content: space-between;
    }
    .pay-message {
        font-size: 13px;
        text-align: center;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
    }
    .hasChoose {
        border: 2px solid var(--main-color);
    }
    .money {
        color: var(--main-color);
        font-size: 2em;
    }
</style>